jQuery修改HTML属性、CSS样式、元素内容和位置宽高 |
您所在的位置：网站首页 › jquery 修改属性 › jQuery修改HTML属性、CSS样式、元素内容和位置宽高 |
jQuery修改HTML属性、CSS样式、元素内容和位置宽高
|
理解jQuery中的getter和setter
getter和setter方是指获取和设置对象中的属性值的一类方法。jQuery中的也存在这类方法。在jQuery中，这类方法有一些基础的规则。 jQuery使用同一个方法既当getter用又当setter用，而不是定义一对方法。如果传入一个新值给该方法，则它设置此值；如果没有指定值，则它返回当前值。用作setter时，这些方法会给jQuery对象中的每一个元素设置值，然后返回该jQuery对象以方便链式调用。用作getter时，这些方法只会查询 元素集中的第一个元素，返回单个值。如果要遍历所有元素，需要使用map()。getter不会返回调用自身的jQuery对象，因此它只能出现在链式调用的末尾。用作setter时这些方法经常接受对象参数。在这种情况下，该对象的每一个属性都指定一个需要设置的名/值对。用作setter时，这些方法经常接收函数参数。在这种情况下，会调用该函数来调用需要设置的值。调用该函数时的this值是对应的元素，第一个参数是该元素的索引值，第二个参数是当前值。 获取和设置HTML属性使用attr()方法可以设置和获取元素的HTML属性。 attr()可以使用HTML属性名，也可以使用JavaScript属性名，比如：可以接收“class”，也可以接收“className”。 removeAttr()方法可以从所选元素中移除某一元素。 实例1-1： HTML代码： 我的博客JavaScript代码： // 获取a元素的target属性 $("a").attr("target"); // 设置a元素的target属性 $("a").attr("target", "_blank"); // 使用对象批量设置元素的属性 $("a").attr({ href: "https://blog.csdn.net/weixin_37572977", target: "_blank" }); // 使用函数设置元素的属性 $("a").attr("targrt", function () { return "_blank"; }) // 移除元素的某一属性 $("a").removeAttr("target");使用函数设置元素的属性时，函数可以接收两个可选的参数，第一个参数为选择器的index值，第二个参数是当前属性的值。 获取和设置CSS属性使用css()方法可以设置和获取元素的css属性。 css()方法返回的时元素的当前样式（或者成为元素的“计算样式”）；返回值可能来自于元素的style属性，也可能来自于样式表。 使用css()方法设置样式时，会将样式添加到元素的style属性中。 css()方法允许样式名称使用连字符，也允许使用驼峰命名的JavaScript样式名。 css()方法在获取样式值时，会把数值转换成带有单位后缀的字符串返回，在设置样式值时，会将数值转化成字符串，必要时添加“px”后缀。 实例1-2： HTML代码： jqueryCSS代码： .node { border: 1px solid black; }JavaScript代码： // 使用连字符样式名称获取样式 $("h1").css("font-weight"); // 使用驼峰格式也能获取样式 $("h1").css("fontWeight"); // 获取符合样式也是不报错的 $("h1").css("font"); // 为h1标签设置样式 $("h1").css("font-variant", "smallcaps"); // css()方法可以设置符合样式 $("div.node").css("border", "2px solid red"); // 可以将多个样式写在一个对象中传给css()方法，这样可以同时设置多个样式 $("h1").css({ backgroundColor: "black", color: "white", fontVariant: "small-caps", padding: "10px 2px 4px 20px", border: "dotted black 4px" }); // css()方法的参数也可以是一个函数 $("h1").css("font-size", function (i, curval) { return Math.round(1.25 * parseInt(curval)); })部分资料中说css()方法不能获取符合样式，但在测试实例的过程中发现css()方法可以获取符合样式，但格式和常见格式并不太相同。下图是在Chrome浏览器中获取符合样式的结果： 
获取复合样式的值
上面的结果在代码中并不利于实际的操作，所以在代码中基本不这样获取符合样式。 向css()方法中传入函数时，可以带有两个可选的参数，第一个参数为选择器的index位置，第二个参数为css属性的当前值。 获取和设置CSS类在JavaScript中，元素的class属性值会被解析成为一个由空格分隔的class类名列表，因此直接替换、删除、设置元素的class属性就显得非常不合理。在jQuery中，为操作元素的class属性定义了一些便捷的方法： 操作元素的class属性 方法名作用addClass()为选中元素添加类removeClass()删除选中元素中的类toggleClass() 当元素还没有某些类时，给元素添加这些类；当元素有这些类时，则删除hasClass()判断某类是否存在实例1-3： // 添加CSS类 $("h1").addClass("className"); // 为h1添加一个类 $("h1").addClass("className1 className2"); // 同时为h1添加两个类 $("h1").addClass(function(){ // 使用函数添加类 return "className"; }); // 删除CSS类 $("h1").removeClass("className"); // 为h1删除一个类 $("h1").removeClass("className1 className2"); //同时为h1删除两个类 $("h1").removeClass(function(){ // 使用函数删除元素 中的类 return "className"; }); $("h1").removeClass(); // 删除h1中所有的类 // 切换CSS类 $("h1").toggleClass("className"); // 如果h1不存在该类则添加 // 如果存在则删除 $("h1").toggleClass("className1 className2"); // 同时为h1切换两个类 $("h1").toggleClass(function(){ // 切换函数返回的类 return "className"; }); //检测CSS类 $("h1").hasClass("className"); //如果所有的h1元素中由任意一个存在该类，则返回true，如果任意一个都没有，则返回false 修改和获取元素内容使用text()和html()方法获取和设置元素的纯文本或HTML内容。 text()方法：不带参数时返回所有匹配元素的所有子孙节点的纯文本内容。 html()方法：不带参数时返回选中元素的第一个匹配元素的HTML内容。 如果传入字符串给text()和html()方法，该字符串会用做该元素的纯文本或格式化的HTML内容。会替换掉之前元素中所有存在的内容。 实例1-4： // 获取HTML文档的标题 var title = $("head title").text(); // 获取文档中第一个元素的html内容 var headline = $("h1").html(); // 给每一个标题添加章节号 $("h1").text(function(n, current){ return (n+1) + "：" + current; });可以使用函数设置元素的内容，函数可以接收两个可选的参数，第一个参数为选择器的index值，第二个参数是当前元素的内容。 获取和设置HTML表单值val()方法用于设置和获取HTML表单元素的value属性，用法示例如下： 实例1-5： HTML部分： 姓名： 性别： 男 女 年龄： 爱好： 篮球 足球 乒乓球 课程： 语文 数学 英语JavaScript部分： // 获取姓名文本框的值（返回值为文本框中输入的值，类型为字符串） var nameVal = $("#name").val(); // 获取下拉菜单当前被选中的单一值（返回值为被选中项的value值，类型为字符串） var select = $("#like").val(); // 获取多选下拉菜单中被选中的值（返回值为一组被选中项的value值，类型为数组，即使被选中项只有一个，也返回数组） var selectM = $("select#likeM").val(); // 获取性别单选框中被选中的值（返回值为被选中按钮的value值，类型为字符串） var sex = $("input:radio[name=sex]:checked").val(); // 设置文本框的值 $("#name").val("新name"); // 设置value值为”语文“和”英语“的复选框为选中状态（获取复选框值时的返回值和获取多选下拉值时的返回值形式相同） $("input:checkbox").val(["yuwen", "yingyu"]); // .val()方法也可以传一个函数进去，这时函数的返回值会被赋给对应的元素 $("input:text").val(function () { return 20; }); 获取和设置元素的位置宽高 获取和设置元素的位置使用offset()方法获取和设置元素的的位置，该方法相对于文档计算相对值，返回一个对象，带有left和top属性，用来表示X和Y坐标。如果传入带有left和top属性的对象给该方法，则它会给元素设定指定的位置。在有必要时，会自动设置元素的position属性来使元素变得可定位。 实例1-6： // 获取需要移动的元素 var elt = $("#sprite"); // 获取元素的当前位置 var position = elt.offset(); // 改变元素的Y坐标 position.top += 100; // 设置新位置 elt.offset(position); // 将所有h1元素向右移动，移动的距离取决于它们在文档中的位置 $("h1").offect(function(index, curpos){ return {left: curpos.left+25*index, top: curpos.top}; });jQuery中存在position()方法，其返回值与offect()方法类似，但它返回的元素位置时相对于其偏移父元素的，而不是相对于文档的，且只能回去元素的位置，不能设置元素的位置。 这里的偏移父元素是指在选中元素的父元素中，离选中元素最近的，设置了定位属性的元素。 获取和设置元素的宽高jQuery中和元素宽高的方法有6个，具体区别见下表： jQuery获取和设置元素宽高 方法名称说明可用于getter？可用于setter？是否可用于Window或Document对象width()获取元素基本宽度，不包含内边距和外边距是是是height()获取元素的基本高度，不包含内边距和外边距是是是innerWidth()获取元素的宽度，包含内边距不包含外边距否否否innerHeight()获取元素的高度，包含内边距不包含外边距否否否outerWidth()获取元素的宽度，包含内边距和外边距否否否outerHeight()获取元素的高度，包含内边距和外边距否否否这里需要注意的是当width()和height()方法用于设置元素时，并不是同获取时一样操作元素的基本宽高（不包含元素的内外边距），而是设置该元素CSS的width和height属性，具体情况由元素所采用的盒模型来决定。 虽然width()和height()方法可以用于Window和Document对象，但不能设置Window和Document对象的宽度和高度。 和其他setter方法一样，width()和height()方法可以传入对应的计算函数。 获取和设置元素的滚动条位置scrollTop()和scrollLeft()可获取和设置元素的滚动条位置。可以用与Window和Document对象。 scrollTop()和scrollLeft()方法用做setter时不接受计算函数作为参数。 获取和设置元素数据将数据与某一元素相关联，关联后的数据就是这一元素的元素数据。 jQuery中的元素数据并非作为元素的属性来存储，而是将整个元素数据作为一个对象存放在元素的一个特殊属性中，这一特殊属性是jQuery为元素额外添加的。 在某些浏览器中，不允许为、和元素添加属性，所以jQuery索性不允许给这些类型的元素关联数据。 jQuery定义了data()方法来获取和设置元素的元素数据。 当data()方法用于设置元素的元素数据时，传递名称和值两个参数即可，也可以传递对象给data()方法，但需要注意的是传递对象时，会先删除原本该元素的所有元素数据 。data()不接受函数设置元素数据。 当data()方法不带参数时，会获取一个由该元素所有的元素数据构成的对象。当传入一个字符串时，会返回元素数据中与该字符串相关联的数据值。 jQuery方法中还存在removeData()方法，当参数为空时，该方法将删除元素的所有元素数据。如果传递字符串给removeData()方法，则会删除与该字符串相关联的元素数据的值。 jQuery还未data()和removeData()方法定义了函数形式：$.data(e, ...); 其中e时jQuery对象。 |
【本文地址】